<template>
	<div>
		<div i-if="fullscreenLoading">
			<el-row>
				<el-button type="primary" round @click="openFullScreen" v-loading.fullscreen.lock="fullscreenLoading">加载样式1</el-button>
				<el-button type="primary" round @click="openFullScreen2">加载样式2</el-button>
			</el-row>
			<el-row>
				<el-button type="" @click="open">点击打开 Message Box</el-button>
			</el-row>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'Layer',
		data() {
			return {
				fullscreenLoading: false
			}
		},
		methods: {
			openFullScreen() {
				this.fullscreenLoading = true;
				setTimeout(() => {
					this.fullscreenLoading = false;
				}, 2000);
			},
			openFullScreen2() {
				const loading = this.$loading({
					lock: true,
					text: 'Loading',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				setTimeout(() => {
					loading.close();
				}, 2000);
			},
			open() {
				this.$alert('这是一段内容', '标题名称', {
					confirmButtonText: '确定',
					callback: action => {
						this.$message({
							type: 'info',
							message: `action: ${ action }`
						});
					}
				});
			}
		},

		mounted() {
			this.openFullScreen2();
		},
	}
</script>